<template>
  <view>
    <view class="card">
      <view class="card__left">
        <view class="card__left--hint">一对一</view>
        <lr-image width="200rpx" height="160rpx" radius="8rpx"></lr-image>
      </view>
      <view class="card__center">
        <view class="card__center--title">基础入门-数据库实战教程</view>
        <view class="card__center--hint">
          <text class="tips" v-for="(tips,tipsIndex) in 2" :key="tipsIndex"
                :class="tipsIndex % 2  === 1 ? 'tips-singular' :'tips-plural'">入门必选
          </text>
        </view>
        <view class="card__center--bottom">
          <view class="card__center--bottom--discount">¥ 899.00</view>
          <view class="card__center--bottom--original">
            <text class="line-through">原价:¥1899.00</text>
          </view>
        </view>
      </view>
      <view class="card__right">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "lr-course"
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  //justify-content: space-between;
  background: #ffffff;
  padding: 20rpx;
  border-radius: 16rpx;
  box-sizing: border-box;

  //& + .card {
  //  margin-top: 20rpx;
  //}

  &__left {
    position: relative;
    width: 200rpx;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;
    flex-shrink: 0;

    &--hint {
      position: absolute;
      padding: 4rpx 10rpx;
      border-radius: 8rpx 0 16rpx 0;
      font-size: $u-tips-font;
      background: $u-error;
      color: #ffffff;
      z-index: 10;
    }
  }

  &__center {
    box-sizing: border-box;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &--title {
      font-size: $u-main-font;
      font-weight: 500;
      margin-bottom: 20rpx;
    }

    &--hint {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .tips {
        padding: 4rpx 10rpx;
        font-size: $u-tips-font;
        border-radius: 4rpx;

        & + .tips {
          margin-left: 20rpx;
        }
      }
    }

    &--bottom {
      flex: 1;
      display: flex;
      align-items: flex-end;

      &--discount {
        color: $u-error;
        font-size: $u-title-big-font;
        font-weight: 500;
      }

      &--original {
        margin-left: 10rpx;
        font-size: $u-tips-font;
      }
    }
  }

  &__right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
